<template>
  <div>
    <div class="v-container">
      <v-header title="">
        <span class="back" @click="goBack">
          <i class="el-icon-arrow-left"></i>
        </span>
      </v-header>
      <div class="mt">
        <div>
          <img src="@/assets/images/e_banner.jpg" width="100%">
        </div>
        <div class="con_inner fuxz g-clearfix">
          <div class="c_select" @click="changeSelect()">
            <img v-show="!select" src="@/assets/images/nclick.png" width="25">
            <img v-show="select" src="@/assets/images/click.png" width="25">
          </div>
          <p>
          &nbsp;我已阅读并同意<span  @click="isShowRule = true">《服务细则》</span>
          </p>
        </div>
        <div class="con_inner pWrap">

          <!--  -->
          <div class="p_ele">
            <div class="p_show">
              <div class="p_ta">
                <div class="p_cell">
                  <p>1<span>元</span></p>
                </div>
              </div>
            </div>
            <div class="p_font">
              <div class="p_ta">
                <div class="p_cell">
                  <p class="p1"><span style="color:#e34846">*</span>焦作中旅银行每人限享1次</p>
                  <p class="p2">剩余名额：<span style="color:#e34846">{{leastNumber.leastNumber1}}</span></p>
            
                </div>
              </div>
            </div>
            <div class="p_btn">
              <div class="p_ta">
                <div class="p_cell" @click="qiangfun(1)">
                  <img src="@/assets/images/price_btn.png" width="50">
                </div>
              </div>
            </div>
          </div>
          <div class="p_ele">
            <div class="p_show">
              <div class="p_ta">
                <div class="p_cell">
                  <p>8<span>元</span></p>
                </div>
              </div>
            </div>
            <div class="p_font">
              <div class="p_ta">
                <div class="p_cell">
                  <p class="p1"><span style="color:#e34846">*</span>焦作中旅银行达标用户专享</p>
                  <p class="p2">剩余名额：<span style="color:#e34846">{{leastNumber.leastNumber2}}</span></p>
            
                </div>
              </div>
            </div>
            <div class="p_btn">
              <div class="p_ta">
                <div class="p_cell"  @click="qiangfun(8)">
                  <img src="@/assets/images/price_btn.png" width="50">
                </div>
              </div>
            </div>
          </div>
          <div class="p_ele">
            <div class="p_show">
              <div class="p_ta">
                <div class="p_cell">
                  <p>18<span>元</span></p>
                </div>
              </div>
            </div>
            <div class="p_font">
              <div class="p_ta">
                <div class="p_cell">
                  <p class="p1"><span style="color:#e34846">*</span>焦作中旅银行达标用户专享</p>
                  <p class="p2">剩余名额：<span style="color:#e34846">{{leastNumber.leastNumber3}}</span></p>
            
                </div>
              </div>
            </div>
            <div class="p_btn">
              <div class="p_ta">
                <div class="p_cell" @click="qiangfun(18)">
                  <img src="@/assets/images/price_btn.png" width="50">
                </div>
              </div>
            </div>
          </div>
          <!--  -->
        </div>
        <div class="con_inner p_point g-clearfix"  @click="pageTo('city')">
          <p>网点查询&gt;&gt;</p>
        </div>
      </div>
    </div>
    <transition  name="fade">
      <!-- 规则蒙层 -->
      <div class="flex-jcc-aic mask" v-if="isShowRule" @click="isShowRule = false">
        <div class="mask-rules" @click.stop> 
          <img class="mask-close" @click="isShowRule = false" src="@/assets/images/btn_close.png" alt="">
          <div class="mask-rules-title">服务细则</div> 
          <div class="mask-rules-list">
            <div class="mask-rules-item">1.洗车优惠活动仅限中旅微信银行绑卡用户。
              <p>①每人可享受一次1元优惠洗车；</p>
              <p>②达标用户可享受8元优惠洗车，达标客户需连续3月月日均资产均大于5万元，且达标用户每月限购4次；</p>
              <p>③所有用户均可享受18元优惠洗车。</p>
            </div>
            <div class="mask-rules-item">2.用户仅在使用中旅银行卡进行支付时，方可享受上述优惠，选择其他支付方式需支付洗车服务全价30元。
            </div>
            <div class="mask-rules-item">3.洗车券一经售出，不兑现、不挂失、不退换，须在有效期内使用，不可延期，有效期为一个月。</div>
            <div class="mask-rules-item">4.用户支付成功后，可通过支付成功页面及个人中心查看洗车券二维码/订单串码。</div>
            <div class="mask-rules-item">5.本服务无须预约，用户前往服务网点向现场服务人员展示洗车券二维码/订单串码完成验证后即可使用，如遇网点繁忙时段，洗车服务可能需要等待，敬请预留充足的时间。</div>
            <div class="mask-rules-item">6.一条洗车券二维码/订单串码可享有全车汽车清洗服务一次，每次服务限一辆5座及以下车型使用。</div>
            <div class="mask-rules-item">7.春节期间（一般时间范围为：农历腊月二十三到正月初七，具体时间以公告为准）本洗车券暂停使用。</div>
            <div class="mask-rules-item">8.本服务适用的服务网点及时间以服务商公布的最新信息为准，请购买界面“网点查询”进行查看。</div>
            <div class="mask-rules-item">9.现场服务人员只负责服务提供，具体服务的咨询及投诉等可致电96999。</div>
            <div class="mask-rules-item">10.本服务由服务商“上海盛世大联汽车服务有限公司”（简称“盛大汽车”）提供，服务的真实性、准确性、合法性均由服务商负责。</div>
          </div>        
          
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import vHeader from "@/components/Header.vue";
import { Toast, MessageBox } from "mint-ui";
import LocalStorage from '@/services/storage';
import { Resource } from '@/services/resource';

export default {
  name: "equity",
  components: {
    vHeader
  },
  props: {
    title: {
      type: String,
      default: "标题"
    }
  },
  data() {
    return {
      select:false,
      isShowRule:false,
      leastNumber:{
        leastNumber1: '',
        leastNumber2: '',
        leastNumber3: ''
      }
      
    };
  },
  mounted() {
    let that=this;
    Resource.login
      .post({}, { data:LocalStorage.getLocalStorage('loginDate') })
      .then(res => {
        console.log(res);
        if (res.head.resultCode == "000000") {
          let token = res.head.token;
          let body=res.body;
          that.leastNumber=body;
          LocalStorage.setLocalStorage(
            "token",
            token,
            59 * 60 * 1000
          );
          this.$store.dispatch("login", token);

        } else {
          Toast({
            message: res.head.resultMsg,
            position: 'middle'
          });
        }
      });
  },
  methods: {
    // 跳转页面
    pageTo(name) {
      console.log(name);
      this.$router.push(name);
      
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    changeSelect() {
      this.select = !this.select;
    },
    qiangfun(ind){
      let that =this;
      if(!this.select){
        // MessageBox.alert('请勾选服务细则~','温馨提示');
        Toast({
          message: '请勾选服务细则~',
          position: 'middle'
        });
      }else{
        let _leastNumber;
        switch (ind){
          case 1:
            _leastNumber=that.leastNumber.leastNumber1;
            break;
          case 8:
            _leastNumber=that.leastNumber.leastNumber2;
            break;
          case 18:
            _leastNumber=that.leastNumber.leastNumber3;
            break;
        }
        if(_leastNumber<=0){
          MessageBox.alert('名额已抢完~','温馨提示');
        }else{
          localStorage.price=ind;
          localStorage.leastNumber=_leastNumber;
          this.$router.push("pay");
        }
        
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import url("./equity.less");
</style>